<template>
  <div>
    <div style="width:30%">
      <h3>没有专业计划的考次</h3>
      <Divider style="height: 2px;margin:15px 0;display: inline-block;" />
    </div>
    <div style="width:80%">
      <h4 style="float: left">考次列表</h4>
      <Divider style="height: 2px;margin:15px 0;display: inline-block;" />
    </div>
    <Table stripe border :columns="columnshead" :data="ExaminationList">
      <template slot-scope="{ row, index }" slot="esXamtype">
        <span>{{ getesXamtype(row.esXamtype) }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="esPlanstate">
        <span>{{ getesPlanstate(row.esPlanstate) }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="esExamstate">
        <span>{{ getesExamstate(row.esExamstate) }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="esTestistate">
        <span>{{ getesExamstate(row.esTestistate) }}</span>
      </template>
      <template slot-scope="{ row,index }" slot="Action">
        <Button id="b2" size="small" @click="editPlan(index)">设置专业计划</Button>
      </template>
    </Table>
    <br>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right">
        <Page :total="total" :current="1" show-elevator show-total @on-change="changePage"></Page>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        columnshead: [{
            title: '考次编码',
            key: 'esId',
            sortable: true
          },
          {
            title: '考次类型',
            slot: 'esXamtype'
          },
          {
            title: '计划考次状态',
            slot: 'esPlanstate'
          },
          {
            title: '考务考次状态',
            slot: 'esExamstate'
          },
          {
            title: '考籍考次状态',
            slot: 'esTestistate'
          },
          {
            title: '开始日期',
            key: 'esStarttime',
            sortable: true
          },
          {
            title: '结束日期',
            key: 'esEndtime',
            sortable: true
          },
          {
            title: '备注',
            key: 'esRemark'
          },
          {
            title: '操作',
            slot: 'Action'
          }
        ],
        ExaminationList: [],
        total: 1
      }
    },
    created() {
      this.$axios.get(this.$host + '/examination/plan/allExamSessionByState?pageNum=1&&pageSize=10&&state=1').then(res => {
        console.log(res)
        this.total = res.data.data.total
        this.ExaminationList = res.data.data.list
      })
    },
    methods: {
      changePage (currentPage) {
        this.$axios.get(this.$host + '/examination/plan/allExamSessionByState?pageNum=' + currentPage +
          '&&pageSize=10&&state=1').then(res => {
          this.ExaminationList = res.data.data.list
        })
      },
      getesXamtype (a) {
        if(a == 0) return '省考';
        else if(a == 1) return '统考';
      },
      getesPlanstate (a) {
        if(a == 0) return '已用';
        else if(a == 1) return '未用';
      },
      getesExamstate (a) {
        if(a == 0) return '冻结';
        else if(a == 1) return '当前';
        else if(a == 2) return '未用';
      },
      editPlan(index) {
        this.$router.push({
          name: 'NewExamPlan',
          query: {
            esId: this.ExaminationList[index].esId
          }
        })
      }
    }
  }
</script>

<style scoped>
  h3 {
    font-size: 1.75rem;
    float: left;
  }

  #b1 {
    float: right;
    background-color: burlywood;
  }

  #b2 {
    background-color: cadetblue;
    float: left;
    color: #F5F7F9;
  }

  #b3 {
    float: left;
    background-color: darksalmon;
  }
</style>
